<template>
  <div>
    <el-row :gutter="10" class="mb8" type="flex" justify="end">
      <el-col :span="1.5">
        <el-button class="pms-button-primary mb14" @click="handleAllClick">查看总览</el-button>
      </el-col>
    </el-row>
    <el-table
      :data="fileData"
      style="width: 100%"
      border
      :header-cell-style="{
        background: '#F5F5F5',
        color: '#333333',
      }"
    >
      <el-table-column align="center" type="index" width="50" label="序号" />
      <el-table-column align="center" prop="categoryCode" label="物料编码" width="280px" show-overflow-tooltip />
      <el-table-column align="center" prop="categoryName" width="280px" label="物料名称" show-overflow-tooltip />
      <el-table-column align="center" prop="unit" label="计量单位" />
      <el-table-column align="center" prop="spuMainName" label="主设备标识" />
      <el-table-column align="center" prop="supply" label="标识甲乙供" />
      <el-table-column align="center" prop="labelNum" label="已贴签数量">
        <template slot-scope="scope">
          <div v-if="scope.row.labelNum" class="click-row" @click="handleClick(scope.row, 'labelNum')">
            {{ scope.row.labelNum }}
          </div>
          <div v-else>{{ scope.row.labelNum }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="noLabelNum" label="未贴签数量">
        <template slot-scope="scope">
          <div v-if="noLabelNum(scope.row)" class="click-row" @click="handleClick(scope.row, 'noLabelNum')">
            {{ scope.row.noLabelNum }}
          </div>
          <div v-else>{{ scope.row.noLabelNum }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="confirmNum" label="已到货确认数量">
        <template slot-scope="scope">
          <div v-if="scope.row.confirmNum" class="click-row" @click="handleClick(scope.row, 'confirmNum')">
            {{ scope.row.confirmNum }}
          </div>
          <div v-else>{{ scope.row.confirmNum }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="noConfirmNum" label="未到货确认数量">
        <template slot-scope="scope">
          <div v-if="scope.row.noConfirmNum" class="click-row" @click="handleClick(scope.row, 'noConfirmNum')">
            {{ scope.row.noConfirmNum }}
          </div>
          <div v-else>{{ scope.row.noConfirmNum }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="swapCount" label="换签次数">
        <template slot-scope="scope">
          <div v-if="scope.row.swapCount" class="click-row" @click="handleClick(scope.row, 'swapCount')">
            {{ scope.row.swapCount }}
          </div>
          <div v-else>{{ scope.row.swapCount }}</div>
        </template>
      </el-table-column>
    </el-table>
    <yardViewDialog :material-removal-visible.sync="materialRemovalVisible" :file-data="fileList" />
    <swapLableDialog :material-removal-visible.sync="swapLableDialogVisible" :file-data="fileList" />
  </div>
</template>
<script>
// 系统常量配置
import SysConst from '@/common/const'
import {
  queryLableCodeList,
  queryLableCodeDetailList,
  swapLableDetailList
} from '@/api/material.js'
import yardViewDialog from '../dialogComponents/yardViewDialog.vue'
import swapLableDialog from '../dialogComponents/swapLableDialog.vue'
export default {
  name: 'YardView',
  components: {
    yardViewDialog,
    swapLableDialog
  },
  data() {
    return {
      // 分页信息
      pageParam: {
        pageSize: SysConst.PAGESIZE,
        pageSizes: SysConst.PAGESIZES,
        currentPage: SysConst.CURRENT_PAGE,
        total: SysConst.TOTAL,
        layout: SysConst.TABLE_LAYOUT
      },
      fileList: [],
      fileData: [],
      materialRemovalVisible: false,
      swapLableDialogVisible: false
    }
  },
  computed: {
    query() {
      return this.$route.query
    },
    noLabelNum() {
      return (row) => {
        return !!+row.noLabelNum && row.spuMainName !== '辅材'
      }
    }
  },
  async mounted() {
    this.queryLableCodeList({ prjId: this.query.prjId })
  },
  methods: {
    // 查询接口
    async queryLableCodeList({ prjId, categoryCode = '', categoryName = '', sonPrjCode = '' }) {
      const res = await queryLableCodeList({ prjId: prjId, categoryCode, categoryName, sonPrjCode })
      if (+res.code === 200) {
        this.fileData = res.data
      }
    },
    // 点击单元格查看弹框
    async handleClick(row, type) {
      this.fileList = []
      const keyValue = {
        主材: '0',
        主设备: '0',
        辅材: '1'
      }
      const params = {
        // 如果没有子项目编码则使用原来的  row?.sonPrjCode !== null ? row.sonPrjCode :
        // prjId: this.query.prjId,
        prjIds: row?.sonPrjCode !== null ? row.sonPrjCode : this.query.prjId,
        categoryCode: row.categoryCode,
        catType: keyValue[row.spuMainName]
          ? keyValue[row.spuMainName]
          : ''
      }
      if (type === 'swapCount') {
        this.swapLableDialogVisible = true
        const res = await swapLableDetailList(params)
        if (+res.code === 200) {
          this.fileList = res.data
        }
      } else {
        this.materialRemovalVisible = true
        const res = await queryLableCodeDetailList(params)
        if (+res.code === 200) {
          this.fileList = res.data
        }
      }
    },
    // 获取新的prjid
    getIdList(q1, q2) {
      const result = q1.map(item => item.sonPrjId || q2)
      // 如果q1中所有对象都有id，则过滤掉q2
      return this.uniqueArrId(result)
    },
    // 去重除重复id
    uniqueArrId(arr) {
      return arr.reduce((acc, item) => {
        // 如果映射对象中不存在当前 item 的 id，则添加到结果数组和映射对象中
        if (!acc.map.has(item.id)) {
          acc.result.push(item)
          acc.map.set(item.id, true)
        }
        return acc
      }, { result: [], map: new Map() }).result
    },
    // 查看总览
    async handleAllClick() {
      this.materialRemovalVisible = true
      // 需要把存在项目id传进来没有就是用原来的
      const list = this.getIdList(this.fileData, this.query.prjId)
      const params = {
        prjId: this.query.prjId,
        catType: 2,
        categoryCode: ''
      }
      const res = await queryLableCodeDetailList(params)
      if (+res.code === 200) {
        this.fileList = res.data
      }
    }
  }
}
</script>
<style scoped>
.el-upload--text {
  width: 100%;
}

.btnflex {
  display: flex;
  justify-content: space-between;
}

.el-table th {
  padding: 0px 0;
  text-align: center;
  font-size: 12px;
  color: #333333;
  letter-spacing: 0;
}

.el-table td {
  padding: 0px 0;
  text-align: center;
  font-size: 2px;
  color: #333333;
  letter-spacing: 0;
}

.click-row {
  color: #53c7f8;
  cursor: pointer;
}
</style>
